<template>
  <div class="slide" @touchstart="touchStartHandle" @touchend="touchEndHandle">
    <slot />
  </div>
</template>
<script>
export default {
  name: 'Slide',
  data() {
    return {
      clientX: null,
      clientY: null
    }
  },
  methods: {
    touchStartHandle(e) {
      if (e.changedTouches.length <= 0) return
      this.clientX = e.changedTouches[0].clientX
      this.clientY = e.changedTouches[0].clientY
    },
    touchEndHandle(e) {
      if (e.changedTouches.length <= 0 || this.clientX === null) return
      const { clientX, clientY } = e.changedTouches[0]
      if (Math.abs(this.clientY - clientY) > 30) return
      if (Math.abs(this.clientX - clientX) < 100) return
      if (clientX - this.clientX > 0) {
        this.$emit('right')
      } else if (clientX - this.clientX < 0) {
        this.$emit('left')
      }
      this.clientX = null
    }
  }
}
</script>
<style lang="less" scoped>
.slide{
  // min-height: 60vh;
}
</style>
